<template>
	<view class="boddyu" @click="submit">
		<view class="images" :style="{
                  'background-repeat': 'no-repeat',
				  backgroundImage: 'url(' + data.logo_image + ')',
                  'background-size': '100% 100%',}">
			<image v-if="data.status==1" style="width: 64rpx;height: 36rpx; margin: 20rpx 0 0 20rpx;"
				src='https://s4.ax1x.com/2022/01/19/7DQSCq.png' /> <!-- //已购 -->

			<image v-if="data.status==0&&data.activity==3" style="width: 64rpx;height: 36rpx; margin: 20rpx 0 0 20rpx;"
				:src="'https://s4.ax1x.com/2022/01/19/7DMqKS.png'" />
			<!-- <text class="bianqian" v-if="data.activity==2">折扣</text> -->
			<!-- 折扣 -->
		</view>
		<view class="boddyu_1 hh" style="
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		line-height: 25px;
		color: #131314;
		opacity: 1;
		">
			{{data.name}}
		</view>
		<view class="boddyu_2 hh" style="
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 40rpx;
		color: #91969A;
		opacity: 1;
		">
			{{data.synopsis}}
		</view>
		<view class="boddyu_3 hh" v-if="geren!=1">
			<text> {{data.study}}</text>
			人已学习
		</view>
		<view class="geren" v-else>
			<text>{{data.study}}人已学习</text>
			<text>￥{{data.original_price}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {}
			},
			image: {
				type: Boolean,
				default: true
			},
			geren: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				list: [{
					name: '精品课程'
				}, {
					name: '最新上线'
				}, {
					name: '免费专区',
				}],
				current: 0
			};
		},
		methods: {
			submit(a, b) {
				this.$emit('onclick', this.data)

			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boddyu_3 {
		text {
			color: #FF2424;
		}
	
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 30px;
		color: #131314;
		opacity: 1;
	}
	.hh {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.bianqian{
		color: white;
		font-size: 18rpx;
		display: inline-block;
		background-color:rgba(254,212,24, $alpha: 1.0);
		padding: 0rpx 10rpx 0rpx 10rpx;
		margin: 20rpx 0 0 20rpx;
		border-radius: 4rpx;
	} 
	.geren {
		text:nth-of-type(1) {
			margin: 10rpx 0 10rpx 0;
			width: 150rpx;
			text-align: center;
			display: block;
			background-color: rgba($color: #FFB300, $alpha: 0.1);
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFB300;
			opacity: 1;
		}

		text:nth-of-type(2) {
			font-size: 34rpx;
			font-family: HarmonyOS Sans;
			font-weight: bold;
			color: #D5212C;
			opacity: 1;
			display: block;
		}
	}

	.body_1_31 {
		display: inline-block;
		float: right;
		font-size: 26rpx;
		font-family: HarmonyOS Sans;
		font-weight: 600;
		color: #FF2424;
		opacity: 1;
	}

	.studey {
		margin-bottom: 40rpx;
		padding: 0 20rpx 0 20rpx;
		width: 690rpx;
		height: 132rpx;
		background-image: url(https://s4.ax1x.com/2022/01/13/7QHUmt.png);
		background-size: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 140rpx;
			height: 58rpx;
		}

		.studey_1 {
			.studey_2 {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #131314;
				opacity: 1;
			}

			.studey_3 {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				line-height: 25px;
				opacity: 1;
			}
		}
	}

	.boddy {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.boddyu {
			width: 48%;

		

			margin-bottom: 20rpx;

			.boddyu_1 {
				-webkit-box-orient: vertical;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 25px;
				color: #131314;
				opacity: 1;
			}

			.boddyu_2 {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40rpx;
				color: #91969A;
				opacity: 1;
			}

			.boddyu_3 {
				text {
					color: #FF2424;
				}

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 30px;
				color: #131314;
				opacity: 1;
			}
		}
	}

	.images {
		width: 336rpx;
		height: 196rpx;
		border-radius: 8rpx;

		.text2 {
			background-color: rgb(255, 213, 0);
			color: white;
			border-radius: 10rpx;
			padding: 3rpx 6rpx 3rpx 6rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;
		}

		.text1 {
			background-color: rgb(255, 36, 36);
			color: white;
			border-radius: 10rpx;
			padding: 3rpx 6rpx 3rpx 6rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;
		}

	}
</style>
